<template>
    <div class="userPage">
      <div class="user_infor">
        <img src="@/assets/default-avatar.png" width="50px" height="50px">
        <div v-if="isLogin">
          <p>{{ info.nick_name }}</p>
          <p>{{ info.mobile }}</p>
        </div>
        <div v-else>
          <p>***</p>
          <button @click="$router.push('/login')" class="active">请登录</button>
        </div>
      </div>
      <div class="user_account">
        <div style="width:32%; padding: 20px;">
          <p style="color:red;">{{ info.balance || 0 }}</p>
          <p style="width: 80px;">账户余额</p>
        </div>
        <div style="width:18%; padding: 20px;">
          <p style="color:red;">0</p>
          <p style="width: 40px;">积分</p>
        </div>
        <div style="width:18%; padding: 20px;">
          <p style="color:red;">0</p>
          <p style="width: 40px;">优惠券</p>
        </div>
        <div class="account_last" style="width:32%; padding: 20px;">
          <van-icon name="pending-payment" size="30px"/>
          <p style="width: 80px;">我的钱包</p>
        </div>
      </div>
      <div class="user_order">
        <div>
          <van-icon name="orders-o" size="40px" @click="goOrder('all')"/>
          <div>全部订单</div>
        </div>
        <div>
          <van-icon name="pending-payment" size="40px" @click="goOrder('payment')"/>
          <div>待支付</div>
        </div>
        <div>
          <van-icon name="logistics" size="40px" @click="goOrder('delivery')"/>
          <div>待发货</div>
        </div>
        <div>
          <van-icon name="completed-o" size="40px" @click="goOrder('received')"/>
          <div>待收货</div>
        </div>
      </div>

      <div class="user_serive">
        <p style="margin-left: 10px;">我的服务</p>
        <div class="row1">
          <div>
            <van-icon name="location-o" size="40px" color="red"/>
            <div>收货地址</div>
          </div>
          <div>
            <van-icon name="gift-o" size="40px" color="red"/>
            <div>领券中心</div>
          </div>
          <div>
            <van-icon name="coupon-o" size="40px" color="red"/>
            <div>优惠券</div>
          </div>
          <div>
            <van-icon name="question-o" size="40px" color="red"/>
            <div>我的帮助</div>
          </div>
        </div>
        <div class="row2">
          <div>
            <van-icon name="gold-coin-o" size="40px" color="red"/>
            <div>我的积分</div>
          </div>
          <div>
            <van-icon name="refund-o" size="40px" color="red"/>
            <div>退换/售后</div>
          </div>
        </div>
      </div>
      <div class="user_footer">
        <button @click="logout">退出登录</button>
      </div>
    </div>
</template>

<script>
import { getUser } from '@/api/user'
export default {
  name: 'UserIndex',
  data () {
    return {
      info: ''
    }
  },
  computed: {
    isLogin () {
      return this.$store.getters.token
    }
  },
  created () {
    if (this.isLogin) {
      this.getUserDetail()
    }
  },
  methods: {
    async getUserDetail () {
      const { data: { userInfo } } = await getUser()
      this.info = userInfo
      console.log(this.info)
    },
    logout () {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '您确认要退出吗？'
      })
        .then(() => {
          this.$store.dispatch('user/setLogout')
        })
        .catch(() => {

        })
    },
    goOrder (key) {
      this.$router.push({
        path: '/order',
        query: {
          dataType: key
        }
      })
    }
  }
}
</script>

<style scoped>
  *{
    font-size: 18px;
  }
  .userPage{
    height: 570px;
    overflow: hidden;
  }
  .user_infor{
    height: 120px;
    padding-left: 20px;
    padding-top: 35px;
    display: flex;
    background-color: #f1c790;
  }
  .user_infor div{
    margin-left: 5px;
  }
  .user_account{
    height: 100px;
    display: flex;
  }
  .account_last{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .user_order{
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
  }
  .user_order div{
    display: flex;
    flex-direction: column; /* 垂直方向布局 */
    align-items: center; /*在交叉轴上居中，即垂直方向居中*/
  }
  .user_serive{
    margin-top: 10px;
  }
  .row1{
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .row2{
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: flex-start;
  }
  .row1 div{
    /* width: 74px; */
    margin-bottom: 5px;
    display: flex;
    flex-direction: column; /* 垂直方向布局 */
    align-items: center;
  }
  .row2 div{
    margin-right: 7px;
    display: flex;
    flex-direction: column; /* 垂直方向布局 */
    align-items: center;
  }
  .user_footer button{
    width: 175px;
    height: 50px;
    margin-top: 20px;
    margin-left: 100px;
    border-radius: 10px;
    border: none;
  }
  .active{
    border: none;
    background-color: #f1c790;
  }
</style>
